<style>
.progress {
  height: 70px;
  background-color: #fff;
}
.progress-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  font-size: 12px;
  width: 100%;
}
.progress-nav .step {
  margin-bottom: 5px;
}
.progress-nav .step span {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 100%;
  background: #dfdfdf;
  font-size: 14px;
}
.progress-nav .step i {
  height: 3px;
  background: #dfdfdf;
  display: block;
  width: 60px;
}
.progress-nav .step i.cur {
  background: #3462ff;
}
.progress-nav.cur {
  color: #3462ff;
}
.progress-nav.cur .step span {
  background: #3462ff;
  color: #fff;
}
.icon {
  width: 30px;
  height: 30px;
}
.none-opacity {
  opacity: 0;
}
</style>
<template>
  <div class="progress flex flex-justify-around flex-align-center">
    <div 
      v-for="(item, i) in data" 
      :key="i" 
      class="item-wrap">
      <div :class="['progress-nav',step>=i?'cur':'']">
        <div class="step flex flex-justify-between flex-align-center" >
          <i :class="[step>(i-1)?'cur':'',i === 0?'none-opacity':'']"/>
          <span><img 
            :src="i<step?'../static/img/check.png':step===i?'../static/img/bu-circle-o.png':'../static/img/circle-thin.png'" 
            class="icon"></span>
          <i :class="[step>i?'cur':'',i === (data.length-1)?'none-opacity':'']"/>
        </div>
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    step: {
      type: [Number],
      default: 1
    },
    data: {
      type: [Array],
      // eslint-disable-next-line
      default: [
        'Dữ liệu cá nhân',
        'Thông tin nhận dạng',
        'Thông tin liên lạc',
        'Thông tin nghề nghiệp',
        'Thông tin thanh toán'
      ]
    }
  },
  data() {
    return {}
  }
}
</script>
